<template>
  <div class="chart-box" ref="chartBox"></div>
</template>

<script>
import resize from '../mixins/resize'

export default {
  title: '雷达图 - 初始化组件使用量统计',
  name: "EchartRadar",
  mixins: [resize],
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null,
      indicatorData: [{max: 0, name: ""}],
      chartData: [0]
    }
  },
  watch: {
    data: {
      deep: true,
      handler: function (val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },

  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.chartBox)
      this.setOptions({indicatorData: [], data: []})
    },
    createData({indicatorData, dataList}) {
      const buildSeries = function (dataIndex) {
        const data = dataList[dataIndex].data
        const helper = data.map((item, index) => {
          const arr = new Array(data.length)
          arr.splice(index, 1, item)
          return arr
        })
        return [data, ...helper].map((item, index) => {
          return {
            name: dataList[dataIndex].name,
            type: 'radar',
            symbol: index === 0 ? 'circle' : 'none',
            symbolSize: 4,
            itemStyle: {
              color: '#fff'
            },
            lineStyle: {
              color: index === 0 ? dataList[dataIndex].color : 'transparent'
            },
            areaStyle: {
              color: index === 0 ? dataList[dataIndex].color : 'transparent',
              opacity: 0.5
            },
            tooltip: {
              show: index !== 0,
              formatter: () => {
                let res = indicatorData[index - 1].name + '<br>'
                for (let x of dataList) {
                  let str = x.name + '：' + x.data[index - 1] + '<br>'
                  res += str
                }
                return res

              }
            },
            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      }

      const series = []

      for (let i = 0; i < dataList.length; i++) {
        series.push(...buildSeries(i))
      }

      return series
    },
    setOptions({indicatorData = [], data = []}) {
      if (!this.chart) {
        return false
      }
      if (!data.length) {
        return false;
      }
      const dataList = [{
        name: '组件使用',
        data: data,
        color: 'rgba(19, 173, 255, 1)',
        unit: ''
      }]

      this.chart.setOption({
        normal: {
          top: 200,
          left: 300,
          width: 500,
          height: 400,
          zIndex: 6,
          backgroundColor: "",
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(0,0,0,0.8)", //设置背景图片 rgba格式
          color: "white",
          borderWidth: "1", //边框宽度设置1
          borderColor: "gray", //设置边框颜色
          textStyle: {
            color: "#FFFFFF", //设置文字颜色
          },
          formatter: (params) => {
            console.log(params)
          }
        },
        radar: {
          center: ["50%", "50%"],
          radius: "70%",
          startAngle: 90,
          splitNumber: 1,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          axisLabel: {
            show: false,
            fontSize: 18,
            color: "#ffffff"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ffffff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ffffff",
            },
          },
          indicator: indicatorData,
        },
        series: [
          ...this.createData({indicatorData, dataList})
        ],
      })
    }
  }
}
</script>

<style scoped lang="less">
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>